<template>
  <div class="wrapper">
    <div class="board">
      <ul class="board__ul">
        <li
          v-for="(item, index) in receiveInfo"
          :key="index"
          :class="item.id != user ? 'board__li' : 'board__limi'"
        >
          <img src="@assets/user.png" alt="" class="board__li__icon" v-show="item.id != user" />
          <div
            class=""
            v-if="item.pic==0"
            :class="item.id != user ? 'board__li__message' : 'board__limi__messagemi'"
          >
            {{ item.message }}
          </div>
          <img
            :src="item.message"
            v-if="item.pic==1"
            alt=""
            :class="item.id != user ? 'board__li__messageImg' : 'board__limi__messagemiImg'"
          />
          <video v-if="item.pic==2" autoplay :src="item.message" :class="item.id != user ? 'board__li__messageImg' : 'board__limi__messagemiImg'"></video>
          <img src="@assets/user.png" alt="" class="board__limi__iconmi" v-show="item.id == user" />
        </li>
      </ul>
    </div>
    <van-field v-model="chat" placeholder="请输入用户名" class="chart__border">
      <van-button
        type="primary"
        slot="button"
        size="small"
        v-show="chat.length > 0"
        @click="publish"
        >publish</van-button
      >
      <van-uploader
        slot="button"
        v-show="chat.length == 0"
        v-model="fileList"
        :after-read="afterRead"
        :preview-image="false"
      >
        <van-icon name="add-o" size="27px" />
      </van-uploader>
    </van-field>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  export default {
    computed: mapGetters({ location: 'generator/location' }),
    data() {
      return {
        address: '',
        client: '',
        chat: '',
        user: '',
        receiveInfo: [],
        usersList: [],
        fileList: [],
        ifpic: false
      };
    },
    methods: {
      websocketCheck() {
        var _this = this;
        if ('WebSocket' in window) {
          console.log('您的浏览器支持 WebSocket!');
          if (_this.client) {
            _this.client.close();
          }
          // 打开一个 web socket
          _this.user = Math.random() * 10000;
          _this.user = Math.round(_this.user);
          _this.client = new WebSocket(
            'ws://' + window.location.host + '/study/websocket/czd/' + _this.user
          );
          _this.client.onopen = function() {
            console.log('websocket连接上了...');
          };
          _this.client.onmessage = function(evt) {
            var rsp = JSON.parse(evt.data);
            var chatInfo = Object.assign({
              message: rsp.message,
              id: rsp.id,
              pic: rsp.isPic
            });

            _this.receiveInfo.push(chatInfo);
          };
          _this.client.onclose = function() {
            // 关闭 websocket
            console.log('连接已关闭...');
          };
        } else {
          // 浏览器不支持 WebSocket
          alert('您的浏览器不支持 WebSocket!');
        }
      },
      reconnect() {
        var _this = this;
        if ('WebSocket' in window) {
          console.log('您的浏览器支持 WebSocket!');
          // 打开一个 web socket
          _this.user = Math.random() * 10000;
          _this.user = Math.round(_this.user);
          _this.client = new WebSocket(
            'ws://' + window.location.host + '/study/websocket/czd/' + _this.user
          );
          _this.client.onopen = function() {
            console.log('连接websocket...');
          };
          _this.client.onmessage = function(evt) {
            var rsp = JSON.parse(evt.data);
            var chatInfo = Object.assign({
              message: rsp.message,
              id: rsp.id
            });
            _this.receiveInfo.push(chatInfo);
          };
          _this.client.onclose = function() {
            // 关闭 websocket
            console.log('连接已关闭...');
          };
        } else {
          // 浏览器不支持 WebSocket
          alert('您的浏览器不支持 WebSocket!');
        }
      },
      publish() {
        var _this = this;
        console.log('数据发送中...');
        _this.ifpic = false;
        var mes = Object.assign({
          message: _this.chat,
          ifpic: 0
        });
        _this.client.send(JSON.stringify(mes));
        _this.chat = '';
      },
      afterRead(file) {
        var _this = this;
        console.log(file, file.file.type);
        var fileTypePic = (file.file.type.includes('image'));
        console.log(fileTypePic);
        var url = '/study/ftp/upload';
        var mes = Object.assign({
          strbase64: file.content,
          filename: file.file.name
        });
        request.post(url, mes).then((rsp) => {
          var mes = Object.assign({
            message: rsp,
            ifpic: fileTypePic?1:2
          });
          _this.client.send(JSON.stringify(mes));
        });
      },
      closeWs() {
        var _this = this;
        _this.client.close();
      },
      onClickLeft() {
        var _this = this;
        _this.client.close();
        window.$utils.exit();
      },
      onClickRight() {
        var _this = this;
        _this.client.close();
        _this.$toast(99);
      }
    },
    mounted() {
      var _this = this;
      //console.log(_this.serializeToUrl('woshinima'), '----', window);
      _this.websocketCheck();
      document.addEventListener('keyup', function(e) {
        if (e.key == 'Enter') {
          _this.publish();
        }
      });
    }
  };
</script>
<style scoped lang="less">
  // .board__li__message::before {
  //   content: '';
  //   width: 0;
  //   position: absolute;
  //   height: 0px;
  //   border-right: 15px solid red;
  //   border-bottom:5px solid transparent;
  //   border-top:5px solid transparent;
  //   border-left:0;
  //   left:10px;
  //   top: 5px;
  // }
  .board__li__message::before {
    display: block;
    content: '';
    border-width: 4px 10px 4px 0px;
    border-style: solid;
    border-color: transparent @white transparent transparent;

    /* 定位 */
    position: absolute;
    left: -10px;
    top: calc(50% - 4px);
  }
  .wrapper {
  }

  .board__limi__messagemi::before {
    display: block;
    content: '';
    border-width: 4px 0px 4px 10px;
    border-style: solid;
    border-color: transparent transparent transparent yellowgreen;

    /* 定位 */
    position: absolute;
    right: -10px;
    top: calc(50% - 4px);
  }
  .board {
    width: 100%;
    height: calc(100% - 52px);
    background-color: @regular-background;
    &__ul {
      height: calc(100% - 40px);
      overflow: scroll;
      padding: 20px;
    }
    &__li {
      width: 100%;
      min-height: 30px;
      display: flex;
      flex-flow: row;
      margin-bottom: 10px;
      &__icon {
        width: 30px;
        height: 30px;
        margin-right: 10px;
      }
      &__message {
        max-width: calc(100% - 30px);
        min-height: 30px;
        text-align: left;
        //overflow: auto;
        word-break: break-all;
        line-height: 30px;
        padding: 0 10px;
        background-color: @white;
        border-radius: 5px;
        box-shadow: @regular-box-shadow;
        position: relative;
      }
      &__messageImg {
        max-width: calc(100% - 30px);
        max-height: 300px;
        text-align: left;
        background-color: @white;
        border-radius: 5px;
        box-shadow: @regular-box-shadow;
        position: relative;
      }
    }

    &__limi {
      width: 100%;
      min-height: 30px;
      display: flex;
      flex-flow: row;
      justify-content: flex-end;
      margin-bottom: 10px;
      &__iconmi {
        width: 30px !important;
        height: 30px;
        margin-left: 10px;
      }
      &__messagemi {
        max-width: calc(100% - 40px);
        min-height: 30px;
        text-align: right;
        line-height: 30px;
        //overflow: auto;
        word-break: break-all;
        padding: 0 10px;
        background-color: yellowgreen;
        border-radius: 5px;
        box-shadow: @regular-box-shadow;
        position: relative;
      }
      &__messagemiImg {
        max-width: calc(100% - 40px);
        max-height: 300px;
        text-align: right;
        background-color: yellowgreen;
        border-radius: 5px;
        box-shadow: @regular-box-shadow;
        position: relative;
      }
    }
  }
  .chart {
    &__border {
      border: 1px solid @regular-border-color;
    }
  }
</style>
